<template>
  <div class="rightbox" v-cloak>
    <h1>科室列表</h1>
    <el-table
    :data="dataList"
    border
    style="width: 96%;margin:2%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table
            :data="props.row.subset"
            border
            style="width: 96%;margin:2%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <div style="margin-top: 20px;">科室简介：</div>
                <p style="margin-top:10px;text-indent: 24px;line-height:36px;width:450px;">{{props.row.remarks}}</p>
                <div style="margin-top: 20px;">科室其他信息：</div>
                <div class="preview" v-for="(item, index) in props.row.fileList" v-bind:key="index">
                  <p v-if="item.type == 1">{{item.value}}</p>
                  <img style="width:450px;" v-if="item.type == 2" v-bind:src="item.value">
                  <video v-bind:src="item.value" style="width:450px;" v-if="item.type == 3" controls></video>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
            >
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址"
            >
            </el-table-column>
            <el-table-column
              prop="state"
              label="状态"
              width="180">
              <template slot-scope="scope">
                <span v-if="scope.row.state == '1'">启用</span>
                <span v-if="scope.row.state == '-1'">禁用</span>
              </template>
            </el-table-column>
            <el-table-column
              prop=""
              width="200"
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="ModifyChild(scope)">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
      >
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.state == '1'">启用</span>
          <span v-if="scope.row.state == '-1'">禁用</span>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        width="300"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="Add(scope)">新增子栏目</el-button>
          <el-button type="text" size="small" @click="Modify(scope)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      dataList: [
        {
          name: '',
          colour: '',
          icon: ''
        }
      ]
    }
  },
  methods: {
    getList: function () {
      var that = this
      that.$pub.open()
      axios({
        method: 'post',
        url: '/gp/Department/Index'
      })
        .then((res) => {
          that.$pub.close()
          if (res.data.code === 0) {
            that.dataList = res.data.data
          } else {
            that.$pub.failcode(that, res.data.code, res.data.data)
          }
        })
        .catch(function () {
          that.$pub.catchbox(that)
        })
    },
    Modify: function (scope) {
      var that = this
      that.$router.push({
        name: 'proTypeModify',
        params: {
          departmentindex: scope.row.departmentindex
        }
      })
    },
    ModifyChild: function (scope) {
      var that = this
      that.$router.push({
        name: 'TypeTwoModify',
        params: {
          departmentindex: scope.row.departmentindex,
          superior: scope.row.superior
        }
      })
    },
    Add: function (scope) {
      var that = this
      that.$router.push({
        name: 'TypeTwoAdd',
        params: {
          departmentindex: scope.row.departmentindex
        }
      })
    }
  },
  mounted () {
    this.getList()
  }
}
</script>
